<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$.ajax</title>
</head>

<body>
    <!-- jquery调用ajax的方法：==$.ajax({});==
参数：
- type：请求方式GET/POST
- url：请求地址url
- async：是否异步，默认是true,表示异步
- data：发送到服务器的数据
- dataType：预期服务器返回的数据类型
- contentType：设置请求头
- success：请求成功时调用此函数
- error：请求失败时调用此函数 -->
    <button id="btn">查询数据</button>
    <!-- 1.引入jquery -->
    <script src="../../jquery练习/jquery.min.js"></script>
    <script>
        $("#btn").click(function() {
            $.ajax({
                type: "get", //请求方式
                url: "AJAX/data.txt", //请求地址
                data: { //请求数据，json对象
                    //如果没有参数，则不需要设置
                },
                dataType: "json", //预期返回的数据类型，如果是json格式，在接收到返回值会自动封装成json对象
                //请求成功时，调用的函数
                success: function(data) { //data是形参名，代表返回的数据
                    console.log(data);
                    // DOM操作(如果想将数据放到页面上)
                    // 创建url
                    var ul = $("<ul></ul>");
                    // 遍历返回的数组
                    for (var i = 0; i < data.length; i++) {
                        // 得到数组中每一个元素
                        var user = dada[i];
                        var li = "<li>" + user.userName + "</li>";
                        // 将li元素设置到ul元素中
                        ul.append(li);
                    }
                    // 将ul设置到body标签中
                    $("body").append(ul);
                }
            })
        })
    </script>
</body>

</html>